<template>
	<!-- 在线客服 -->
	<view id="online_service">
		<!-- 身 -->
		<view class="online_service_main" style="background-color: #F1F1F1;">
			<!-- 问题列表 -->
			<view class="main_issue_list">
				<!-- 头部 -->
				<view class="header">热门问题</view>
				<!-- 问题 -->
				<view class="issue">
					<view class="issue_view" @click="clickIcon(index)" v-for="(item, index) in issueList" :key="index">
						<text>{{ item.issue }}</text>
						<van-icon :name="[item.flag == false ? 'arrow' : 'arrow-down']" />
					</view>
				</view>
			</view>
			<!-- 回答框 -->
			<view class="main_answer" :style="{ display: answerBox }">
				<view>
					<view><text>Q</text>:</view>{{ issue }}
				</view>
				<view class="A">
					<view><text>A</text>:</view>{{ answer }}
				</view>
			</view>
		</view>
		<!-- 脚 -->
		<view class="online_service_footer" @click="contactService">
			<view>联系客服</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				issueList: [{
						id: 0,
						issue: '交易下单过程中不能付款',
						flag: false, //判断你icon的标杆
					},
					{
						id: 1,
						issue: '会员名无法修改',
						flag: false, //判断你icon的标杆
					},
					{
						id: 2,
						issue: '无法使用微信支付',
						flag: false, //判断你icon的标杆
					},
				],
				issue: '交易下单过程中不能付款',
				answer: '用户您好，可能由于网络延迟或者系统卡顿，请你 稍后片刻在进行操作！如仍有疑问，请联系在线客服。',
				answerBox: 'none', //回答框隐藏
			}
		},
		methods: {
			// 点击当前这个icon向下，再点击恢复原状，点击一个后再点击另一个，前一个点击的要恢复原样，实现只有当前这个变化
			clickIcon(index) {
				// 判断当前这个flag是否为false
				if (this.issueList[index].flag === false) {
					// 先把所有的都设置为false，这样其他的有为true也会变为false
					this.issueList.forEach((item) => {
						item.flag = false;
					});
					// 当前这个变为true
					this.issueList[index].flag = true;
					//  如果为true
				} else if (this.issueList[index].flag === true) {
					// 还是先把所有的变为false
					this.issueList.forEach((item) => {
						item.flag = false;
					});
					// 当前这个再变为false
					this.issueList[index].flag = false;
				}
				// 改变当前的问题值
				this.issue = this.issueList[index].issue;
				// 当icon为向下就显示回答框
				this.answerBox = this.issueList[index].flag == false ? 'none' : 'block';
			},
			contactService() {
				uni.navigateTo({
					url:"../contactService/contactService"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	#online_service {
		display: flex;
		flex-direction: column;
		height: 100%;

		// 身
		.online_service_main {
			flex: 1;
			overflow-y: scroll;

			// 问题列表
			.main_issue_list {
				margin: 20rpx;
				border-radius: 10px;
				background: #fff;
				font-size: 28rpx;
				color: #333;

				// 头部
				.header {
					height: 80rpx;
					border-bottom: 2rpx solid #f6f4f6;
					line-height: 80rpx;
					padding: 0 20rpx;
					font-weight: bold;
				}

				// 问题
				.issue {
					.issue_view {
						display: flex;
						justify-content: space-between;
						height: 80rpx;
						line-height: 80rpx;
						padding: 0 20rpx;
					}
				}
			}

			// 回答
			.main_answer {
				height: 322rpx;
				margin: 0 20rpx;
				border-radius: 10px;
				background: #fff;
				font-size: 28rpx;
				color: #333;

				view {
					padding: 0 20rpx;
					padding-top: 20rpx;

					view {
						display: inline-block;
						padding: 0;
						margin-right: 20rpx;
					}

					text {
						margin-right: 10rpx;
					}
				}

				.A {
					line-height: 40rpx;

					text {
						color: #28c84d;
					}
				}
			}
		}

		// 脚
		.online_service_footer {
			padding: 40rpx 20rpx;
			
			view {
				margin: 20rpx;
				border-radius: 10px;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				background: linear-gradient(135deg,
					rgba(40, 200, 78, 1) 0%,
					rgba(15, 212, 29, 1) 100%);
				border-radius: 10px;
			}
		}
	}
</style>
